<template>
    <div>
        <div style="display: flex;flex-direction: row;justify-content: center">
            <el-input v-model="inputInfo" clearable style="width: 200px;margin-right: 10px" type="text"></el-input>
            <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                       type="success" @click="handleReportSearch">搜索
            </el-button>
            <el-button icon="el-icon-plus" size="medium"
                       style="margin-left: 100px" type="primary"
                       @click="handleReportAddition">新增
            </el-button>
        </div>
        <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
            <el-table :key="centerDialogVisible"
                      :data="reports"
                      stripe
                      style="width: 90%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form class="demo-table-expand" inline label-position="left">
                            <el-form-item label="报告人:">
                                <span>{{ props.row.reportPerson }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式:">
                                <span>{{ props.row.personPhone }}</span>
                            </el-form-item>
                            <el-form-item label="报告时间:">
                                <span>{{ props.row.reportTime }}</span>
                            </el-form-item>
                            <el-form-item label="创建人:">
                                <span>{{ props.row.creator }}</span>
                            </el-form-item>
                            <el-form-item label="最后处理人:">
                                <span>{{ props.row.lastHandlePerson }}</span>
                            </el-form-item>
                            <el-form-item label="最后处理时间:">
                                <span>{{ props.row.lastHandleTime }}</span>
                            </el-form-item>
                            <el-form-item label="流程:" class="process-steps">
                                <el-steps :active="props.row.stepActive" align-center finish-status="success">
                                    <el-step v-for="step in props.row.steps"
                                             :key="step.title"
                                             :description="step.desc"
                                             :title="step.title"></el-step>
                                </el-steps>
                            </el-form-item>
                            <div style="display: inline">
                                <el-button type="primary" size="medium"
                                           style="margin-top: 35px"
                                           v-if="props.row.reportStatus==='进行中'"
                                           @click="handleNextSteps(props.row)">下一步</el-button>
                            </div>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                <el-table-column label="接报编码" prop="code" width="100px"></el-table-column>
                <el-table-column label="接报名称" prop="name"></el-table-column>
                <el-table-column label="预备流程" prop="process"></el-table-column>
                <el-table-column label="企业" prop="enterprise"></el-table-column>
                <el-table-column label="接报状态" prop="reportStatus"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            :disabled="scope.row.reportStatus==='已完成'"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            :disabled="scope.row.reportStatus!=='已完成'"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="2"
                :total="paginationTotal"
                background
                layout="prev, pager, next"
                style="margin-top: 5px">
            </el-pagination>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="centerDialogVisible"
            width="60%">
            <el-form :model="selectedReport" class="selectedReportForm">
                <el-form-item label="接报编码:" prop="code">
                    <el-input v-model="selectedReport.code" disabled></el-input>
                </el-form-item>

                <el-form-item label="接报名称:" prop="name">
                    <el-input v-model="selectedReport.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="预备流程:" prop="processT">
                    <el-cascader
                        v-model="selectedReport.processT"
                        :options="processOptions"
                        :props="{ expandTrigger: 'hover' }"
                        show-all-levels
                        @change="handleProcessChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item label="报警人:" prop="reportPerson">
                    <el-input v-model="selectedReport.reportPerson" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="联系方式:" prop="personPhone">
                    <el-input v-model="selectedReport.personPhone"></el-input>
                </el-form-item>

                <el-form-item label="风险企业:" prop="enterprise">
                    <el-select v-model="selectedReport.enterprise">
                        <el-option
                            v-for="item in enterpriseOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false;">取 消</el-button>
                    <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "ReportMaintenance",
    data() {
        return {
            userName: "",
            reports: [],
            processOptions: [],
            enterpriseOptions: [],
            title: "",
            inputInfo: "",
            centerDialogVisible: false,
            selectedReport: {},
            selectedReportIndex: -1,
        }
    },
    methods: {
        getTimeString() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const day = now.getDate();
            return year + "-" + month + "-" + day;
        },
        handleReportAddition() {
            this.title = "新增";
            this.centerDialogVisible = true;
            this.selectedReport = {
                id: this.reports.length + 1,
                code: (Array(3).join('0') + (this.reports.length + 1)).slice(-3),
                creator: this.userName,
                reportTime: this.getTimeString(),
                processT: [],
                reportStatus: "审核中",
                stepActive: -1,
            };
        },
        handleReportSearch() {
            if (this.inputInfo === "") {
                this.reports = variables.reports;
            } else {
                this.reports = variables.reports.filter(report =>
                    report.name.includes(this.inputInfo) ||
                    report.code.includes(this.inputInfo) ||
                    report.process.includes(this.inputInfo) ||
                    report.reportPerson.includes(this.inputInfo) ||
                    report.personPhone.includes(this.inputInfo) ||
                    report.creator.includes(this.inputInfo) ||
                    report.enterprise.includes(this.inputInfo) ||
                    report.lastHandlePerson.includes(this.inputInfo) ||
                    report.lastHandleTime.includes(this.inputInfo)
                );
            }
        },
        handleEdit(index, obj) {
            this.title = "修改";
            this.centerDialogVisible = true;
            this.selectedReportIndex = index;
            this.selectedReport = JSON.parse(JSON.stringify(obj));
        },
        handleDelete(index, row) {
            if (row.reportStatus === "进行中") {
                this.$message({
                    type: "error",
                    message: "进行中的接报无法删除",
                })
            } else {
                this.reports.splice(index, 1);
                this.$message({
                    type: "success",
                    message: "删除成功",
                })
            }
        },
        handleDialogEnter() {
            const process = variables.processes;
            if (this.selectedReport.process !== undefined) {
                for (let j in process) {
                    if (this.selectedReport.process === process[j].type) {
                        console.log("==");
                        this.selectedReport.steps = process[j].steps;
                        this.selectedReport.stepsLength = this.selectedReport.steps.length;
                        break;
                    }
                }
            }
            if (this.title === "新增") {
                this.reports.push(this.selectedReport);
            } else {
                this.reports[this.selectedReportIndex] = this.selectedReport;
            }
            this.centerDialogVisible = false;
        },
        handleProcessChange(v) {
            this.selectedReport.process = v.join("/");
        },
        handleNextSteps(v) {
            v.stepActive++;
            if (v.stepActive===v.stepsLength) {
                v.reportStatus = "已完成";
                this.$message({
                    type: "success",
                    message: "该接报已完成"
                })
            }
        }
    },
    computed: {
        paginationTotal() {
            return this.reports.length;
        }
    },
    mounted() {
        this.userName = this.$route.params.name
        this.reports = variables.reports;
        this.processOptions = variables.reportProcess;
        this.enterpriseOptions = variables.enterprises;
        const process = variables.processes;
        for (let i in this.reports) {
            this.reports[i].processT = this.reports[i].process.split("/");
            for (let j in process) {
                if (this.reports[i].process === process[j].type) {
                    this.reports[i].steps = process[j].steps;
                    this.reports[i].stepsLength = this.reports[i].steps.length;
                    break;
                }
            }
        }
    },
    watch: {
        reports: {
            handler() {
                this.reports.forEach(report => {
                    if (report.reportStatus==="审核通过") {
                        report.reportStatus = "进行中";
                        report.stepActive = 0;
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.selectedReportForm {
    height: 300px;
}

.selectedReportForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.process-steps >>> .el-form-item__content {
    width: 100%;
}
</style>